<%--
  Created by IntelliJ IDEA.
  User: macbookpro
  Date: 2023/11/22
  Time: 21:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>申请成为作者</title>
    <link href="css/authorApply.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
</head>
<style>
    input:focus{
        border-color: #0f82ec;
    }
</style>
<body>
<header id="header">
    <a href="" traget="_blank" class="site-logo">豆瓣阅读</a>
    <ul class="nav">
        <li class="nav-inner"><a>作品展示</a></li>
        <li class="nav-inner"><a>译者项目</a></li>
        <li class="nav-inner"><a>征文活动</a></li>
        <li class="nav-inner"><a>出版与改编</a></li>
    </ul>
</header>
<div class="main-page">
    <h1 class="page-title">图书发表</h1>
    <form method="post" onsubmit="return false" action="#"  class="author-application" id="author-apply" enctype="multipart/form-data">
        <div class="ahthor">
            <div class="field-name tips">作者个人信息</div>
            <div class="tips-block">以下信息会在你的豆瓣阅读个人主页、作品等页面展示给你的读者。</div>
        </div>
        <div class="input-field">
            <label for="author" class="field-label">*作者署名</label>
            <div class="field-name-groups">
                <input type="text" name="author" id="author" class="input-field-name" placeholder="不超过10个字" style="height: 32px">
                <span id="errorMessage" class="error-message">此项为必填项</span>
            </div>
        </div>
        <div class="author">
            <div class="field-name tips">书籍信息</div>
            <div class="tips-block">只用于对您的图书审核</div>
        </div>
        <div class="input-field">
            <label for="bookName" class="field-label">*书籍名称</label>
            <div class="field-name-groups">
                <input type="text" name="bookName" id="bookName" class="input-field-name" placeholder="请填写书籍名称" style="height: 32px">
                <span id="errorMessage4" class="error-message">此项为必填项</span>
            </div>
        </div>
        <div class="input-field">
            <label for="bookImage" class="field-label">*书籍封面</label>
            <div class="field-name-groups">
                <input type="text" id="bookImage" class="input-field-name" name="bookImage" placeholder="书籍封面" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="profile" class="field-label">*书籍精要</label>
            <div class="field-name-groups">
                <input type="text" id="profile" class="input-field-name" name="profile" placeholder="请填写书籍精要" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="background" class="field-label">*书籍背景</label>
            <div class="field-name-groups">
                <input type="text" id="background" class="input-field-name" name="background" placeholder="书籍背景" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="snopsis" class="field-label">*书籍详情</label>
            <div class="field-name-groups">
                <textarea type="text" rows="6" name="snopsis" placeholder="请介绍一下自己的图书吧，100字以内" maxlength="100" id="snopsis" style="width: 507px"></textarea>
            </div>
        </div>
        <div class="input-field">
            <label for="mainsignature" class="field-label" style="font-size: 13px">*主标签</label>
            <div class="field-name-groups">
                <input type="text" id="mainsignature" class="input-field-name" name="mainsignature" placeholder="主标签" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="signature2" class="field-label" style="font-size: 13px">*副标签1</label>
            <div class="field-name-groups">
                <input type="text" id="signature2" class="input-field-name" name="signature2" placeholder="副标签1" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="signature3" class="field-label" style="font-size: 13px">*副标签2</label>
            <div class="field-name-groups">
                <input type="text" id="signature3" class="input-field-name" name="signature3" placeholder="副标签2" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="signature4" class="field-label" style="font-size: 13px">*副标签3</label>
            <div class="field-name-groups">
                <input type="text" id="signature4" class="input-field-name" name="signature4" placeholder="副标签3" style="height: 32px">
            </div>
        </div>
        <div class="input-field">
            <label for="signature5" class="field-label" style="font-size: 13px">*副标签4</label>
            <div class="field-name-groups">
                <input type="text" id="signature5" class="input-field-name" name="signature5" placeholder="副标签4" style="height: 32px">
            </div>
        </div>
        <div style="width: 1300px;height: 32px">
        <label for="myfile" class="field-label" style="margin-left: 230px">*章节试读</label>
        <div class="col-lg-4" style="display: inline-block;height: 32px;width:600px;margin-left: 20px" >
            <input type="file" name="myFile" style="display: inline-block;margin-top:5px;" id="myfile">
        </div>
        </div>
        <div class="choose">
            <label for="agree-term" class="checkbox">
                <input type="checkbox" name="agreed" data-validate="data-validate" data-required="data-required" id="agree-term" class="error">
            </label>
            <p class="agree-info">我已阅读并同意《作者上传书籍协议》</p>
        </div>
        <div class="line"></div>
        <div class="submit-forms">
            <button type="submit" class="btn btn-submit" id="submitForm" onclick="uploadBook(event)">确认提交</button>
        </div>
    </form>
</div>
<script>
   function uploadBook(event){
        var form = new FormData(document.getElementById("author-apply"));
        var checked=document.getElementById("agree-term");
        if(!checked.checked){
            event.preventDefault();
            cocoMessage.error('请勾选上传书籍协议');
        }
        else {
            $.ajax({
                url: '/modelAuthor/uploadBook',
                type: 'POST',
                data: form,
                processData: false,
                contentType: false,
                success: function () {
                    console.log('文件上传成功');
                    cocoMessage.success('上传成功，请等待平台审核',2500);
                },
                error: function (error) {
                    console.error('文件上传失败:', error);
                }
            });
        }
    }


</script>
</body>
</html>
